<template>
  <div class="chinese-map">
    <div id="chart_map" class="echarts"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts/map/js/china.js";
// import Cookies from "js-cookie";
// import { countBaData } from "@/api/yneebase";
import yunnanObj from "echarts/map/json/province/yunnan.json";
export default {
  data() {
    return {
      listArr: [],
      cityList: [
        {
          areaCode: "530100000000",
          name: "昆明市"
        },
        {
          areaCode: "530300000000",
          name: "曲靖市"
        },
        {
          areaCode: "530400000000",
          name: "玉溪市"
        },
        {
          areaCode: "530500000000",
          name: "保山市"
        },
        {
          areaCode: "530600000000",
          name: "昭通市"
        },
        {
          areaCode: "530700000000",
          name: "丽江市"
        },
        {
          areaCode: "530800000000",
          name: "普洱市"
        },
        {
          areaCode: "530900000000",
          name: "临沧市"
        },
        {
          areaCode: "532300000000",
          name: "楚雄州"
        },
        {
          areaCode: "532500000000",
          name: "红河州"
        },
        {
          areaCode: "532600000000",
          name: "文山州"
        },
        {
          areaCode: "532800000000",
          name: "西双版纳"
        },
        {
          areaCode: "532900000000",
          name: "大理州"
        },
        {
          areaCode: "533100000000",
          name: "德宏州"
        },
        {
          areaCode: "533300000000",
          name: "怒江州"
        },
        {
          areaCode: "533400000000",
          name: "迪庆州"
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.getWidth();
    this.initChart();
  },
  methods: {
    initChart() {
      let res = {
        msg: "查询成功",
        result: {
          nowDate: "2020-05-07 16:21:40",
          total: 108350,
          countCd: 108148,
          detail: [
            {
              nowDate: null,
              areaName: "昆明",
              areaCode: "530100000000",
              sousrceNumTotal: null,
              sousrceNumReg: "48023",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "红河",
              areaCode: "532500000000",
              sousrceNumTotal: null,
              sousrceNumReg: "10205",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "普洱",
              areaCode: "530800000000",
              sousrceNumTotal: null,
              sousrceNumReg: "5547",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "曲靖",
              areaCode: "530300000000",
              sousrceNumTotal: null,
              sousrceNumReg: "5135",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "临沧",
              areaCode: "530900000000",
              sousrceNumTotal: null,
              sousrceNumReg: "5028",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "大理",
              areaCode: "532900000000",
              sousrceNumTotal: null,
              sousrceNumReg: "4968",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "昭通",
              areaCode: "530600000000",
              sousrceNumTotal: null,
              sousrceNumReg: "4895",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "文山",
              areaCode: "532600000000",
              sousrceNumTotal: null,
              sousrceNumReg: "4549",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "保山",
              areaCode: "530500000000",
              sousrceNumTotal: null,
              sousrceNumReg: "4049",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "楚雄",
              areaCode: "532300000000",
              sousrceNumTotal: null,
              sousrceNumReg: "3885",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "玉溪",
              areaCode: "530400000000",
              sousrceNumTotal: null,
              sousrceNumReg: "3022",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "德宏",
              areaCode: "533100000000",
              sousrceNumTotal: null,
              sousrceNumReg: "2383",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "西双版纳",
              areaCode: "532800000000",
              sousrceNumTotal: null,
              sousrceNumReg: "1746",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "丽江",
              areaCode: "530700000000",
              sousrceNumTotal: null,
              sousrceNumReg: "1604",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "怒江",
              areaCode: "533300000000",
              sousrceNumTotal: null,
              sousrceNumReg: "1519",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "迪庆",
              areaCode: "533400000000",
              sousrceNumTotal: null,
              sousrceNumReg: "1238",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            },
            {
              nowDate: null,
              areaName: "省直",
              areaCode: "530000000000",
              sousrceNumTotal: null,
              sousrceNumReg: "0",
              sousrceNumRad: null,
              sousrceNumSP: null,
              sousrceNumDP: null,
              sousrceHp: null,
              sousrceZy: null,
              sousrceReg: null,
              sousrceRad: null,
              sousrceSp: null,
              sousrceDp: null,
              officeSPTNumTotal: null,
              officeGJPTNumTotal: null,
              officeNotGJPTNumTotal: null,
              detail: null,
              taskName: null,
              officeNumTotal: null
            }
          ],
          countNotCd: 202
        },
        code: "200"
      };
      console.log(222, res);

      let arr = res.result.detail;
      for (let i = 1; i < arr.length; i++) {
        for (let j = 0; j < this.cityList.length; j++) {
          if (arr[i].areaCode == this.cityList[j].areaCode) {
            this.listArr.push([
              {
                name: this.cityList[j].name,
                value: arr[i].sousrceNumReg * 1
              }
            ]);
          }
        }
      }

      this.drawYunanMap(this.listArr);
    },
    getWidth() {
      let cw = document.documentElement.clientWidth;
      let ch = document.documentElement.clientHeight;
      let w = cw * 0.35 + "px";
      let h = ch * 0.62 + "px";
      document.getElementById("chart_map").style.width = w;
      document.getElementById("chart_map").style.height = h;
    },
    drawYunanMap(chinaDatas) {
      //  console.log(33333,chinaDatas);

      let _this = this;
      var myChart = echarts.init(document.getElementById("chart_map"));
      echarts.registerMap("yunnan", yunnanObj);

      var chinaGeoCoordMap = {
        昆明市: [102.712251, 25.040609],
        曲靖市: [103.797851, 25.501557],
        玉溪市: [102.543907, 24.350461],
        保山市: [99.167133, 25.111802],
        昭通市: [103.717216, 27.336999],
        丽江市: [100.233026, 26.872108],
        普洱市: [100.972344, 22.777321],
        临沧市: [100.08697, 23.886567],
        楚雄州: [101.546046, 25.041988],
        红河州: [103.384182, 23.366775],
        文山州: [104.24401, 23.36951],
        西双版纳: [100.797941, 22.001724],
        大理州: [100.225668, 25.589449],
        德宏州: [98.578363, 24.436694],
        怒江州: [98.854304, 25.850949],
        迪庆州: [99.706463, 27.826853]
      };

      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = chinaGeoCoordMap[dataItem[0].name];
          var toCoord = [102.712251, 25.040609];
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
                value: dataItem[0].value
              },
              {
                coord: toCoord
              }
            ]);
          }
        }
        return res;
      };
      var series = [];
      [["昆明市", chinaDatas]].forEach(function(item, i) {
        series.push(
          {
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 4, // 箭头指向速度，值越小速度越快
              trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", // 箭头图标
              symbolSize: 3// 图标大小
            },
            lineStyle: {
              normal: {
                width: 1, // 尾迹线条宽度
                opacity: 1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              }
            },
            data: convertData(item[1])
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              // 涟漪特效
              period: 4, // 动画时间，值越小速度越快
              brushType: "stroke", // 波纹绘制方式 stroke, fill
              scale: 5 // 波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                position: "right", // 显示位置
                offset: [2, 0], // 偏移设置
                formatter: function(params) {
                  // 圆环显示文字
                  return params.data.name;
                },
                fontSize: 13
              },
              emphasis: {
                show: true
              }
            },
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                show: false,
                color: "#f00"
              }
            },
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[0].name,
                value: chinaGeoCoordMap[dataItem[0].name].concat([
                  dataItem[0].value
                ])
              };
            })
          },
          // 被攻击点
          {
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: "stroke",
              scale: 4
            },
            label: {
              normal: {
                show: true,
                position: "right",
                // offset:[5, 0],
                color: "#0f0",
                formatter: "{b}",
                textStyle: {
                  color: "#0f0"
                }
              },
              emphasis: {
                show: true,
                color: "#f60"
              }
            },
            symbol: "pin",
            symbolSize: function(val) {
                return val[2] * 0.01;
            },
            data: [
              {
                name: item[0],
                value: chinaGeoCoordMap[item[0]].concat([10])
              }
            ]
          }
        );
      });

      myChart.setOption({
        tooltip: {
          trigger: "item"
        },

        geo: {
          map: "yunnan",
          zoom: 1.3,
          roam: true, // 是否允许缩放
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true, // 是否允许缩放
          itemStyle: {
            normal: {
              color: "rgba(51, 69, 89, .5)", // 地图背景色
              borderColor: "#516a89", // 省市边界线00fcff 516a89
              borderWidth: 1
            },
            emphasis: {
              color: "rgba(37, 43, 61, .5)" // 悬浮背景
            }
          }
        },
        series: series
      });

       myChart.on("click", function(params) {
        console.log(params);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.chinese-map {
  width: 100%;
  height: 100%;

  background: #000;
}

a{
    color: #f60;
    color:#0f0;
}
</style>
